<template>
	<div>
		<el-card
			class="box-card"
			:style="{background:color}"
		>
			<div
				slot="header"
				class="clearfix setFlex"
			>
				<el-tag type="success">{{title}}</el-tag>
				<div class="block">
					<el-tooltip
						class="item"
						effect="dark"
						content="更改背景色"
						placement="top-end"
					>
						<el-color-picker
							v-model="color"
                            size="mini"
							show-alpha
						></el-color-picker>
					</el-tooltip>
				</div>
			</div>
			<div
				id="bar-race-country"
				class="chart"
			></div>
		</el-card>
	</div>
</template>

<script>
	import $ from "jquery";
	export default {
		name: "DTPXZZT",
		data() {
			return {
				title: "当前显示：动态排序柱状图组件",
				color: "#FFFFFF",
			};
		},
		mounted() {
			this.$nextTick(() => {
				this.initChart();
			});
		},
		methods: {
			initChart() {
				var chart = this.$echarts.init(
					document.getElementById("bar-race-country"),
					"bar-race-country"
				);
				let updateFrequency = 2000;
				let dimension = 0;
				let ROOT_PATH =
					"https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples";
				let countryColors = {
					Australia: "#00008b",
					Canada: "#f00",
					China: "#ffde00",
					Cuba: "#002a8f",
					Finland: "#003580",
					France: "#ed2939",
					Germany: "#000",
					Iceland: "#003897",
					India: "#f93",
					Japan: "#bc002d",
					"North Korea": "#024fa2",
					"South Korea": "#000",
					"New Zealand": "#00247d",
					Norway: "#ef2b2d",
					Poland: "#dc143c",
					Russia: "#d52b1e",
					Turkey: "#e30a17",
					"United Kingdom": "#00247d",
					"United States": "#b22234",
				};

				$.when(
					$.getJSON("https://cdn.jsdelivr.net/npm/emoji-flags@1.3.0/data.json"),
					$.getJSON(ROOT_PATH + "/data/asset/data/life-expectancy-table.json")
				).done(function (res0, res1) {
					let flags = res0[0];
					let data = res1[0];
					let years = [];
					for (let i = 0; i < data.length; ++i) {
						if (years.length === 0 || years[years.length - 1] !== data[i][4]) {
							years.push(data[i][4]);
						}
					}

					function getFlag(countryName) {
						if (!countryName) {
							return "";
						}
						return (
							flags.find(function (item) {
								return item.name === countryName;
							}) || {}
						).emoji;
					}
					let startIndex = 10;
					let startYear = years[startIndex];

					let option = {
						grid: {
							top: 10,
							bottom: 30,
							left: 150,
							right: 80,
						},
						xAxis: {
							max: "dataMax",
							label: {
								formatter: function (n) {
									return Math.round(n);
								},
							},
						},
						dataset: {
							source: data.slice(1).filter(function (d) {
								return d[4] === startYear;
							}),
						},
						yAxis: {
							type: "category",
							inverse: true,
							max: 10,
							axisLabel: {
								show: true,
								textStyle: {
									fontSize: 14,
								},
								formatter: function (value) {
									return value + "{flag|" + getFlag(value) + "}";
								},
								rich: {
									flag: {
										fontSize: 25,
										padding: 5,
									},
								},
							},
							animationDuration: 300,
							animationDurationUpdate: 300,
						},
						series: [
							{
								realtimeSort: true,
								seriesLayoutBy: "column",
								type: "bar",
								itemStyle: {
									color: function (param) {
										return countryColors[param.value[3]] || "#5470c6";
									},
								},
								encode: {
									x: dimension,
									y: 3,
								},
								label: {
									show: true,
									precision: 1,
									position: "right",
									valueAnimation: true,
									fontFamily: "monospace",
								},
							},
						],
						// Disable init animation.
						animationDuration: 0,
						animationDurationUpdate: updateFrequency,
						animationEasing: "linear",
						animationEasingUpdate: "linear",
						graphic: {
							elements: [
								{
									type: "text",
									right: 160,
									bottom: 60,
									style: {
										text: startYear,
										font: "bolder 80px monospace",
										fill: "rgba(100, 100, 100, 0.25)",
									},
									z: 100,
								},
							],
						},
					};
					chart.setOption(option);

					for (var i = startIndex; i < years.length - 1; ++i) {
						(function (i) {
							setTimeout(function () {
								updateYear(years[i + 1]);
							}, (i - startIndex) * updateFrequency);
						})(i);
					}

					function updateYear(year) {
						var source = data.slice(1).filter(function (d) {
							return d[4] === year;
						});
						option.series[0].data = source;
						option.graphic.elements[0].style.text = year;
						chart.setOption(option);
					}
				});
			},
		},
	};
</script>

<style lang="css" scoped>
</style>